/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-11 14:03:59
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-23 15:30:55
 * @FilePath: \施航4阶段react\src\components\Customertype.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Table, Modal, Button, Form, Input, Space } from 'antd';
import React, { useState, useLayoutEffect } from 'react';
import '../assets/css/Cstomertype.css'
import axios from 'axios';
const columns = [
    {

        title: '渠道类型',
        dataIndex: 'priceSystemId',
        align: 'center',

    },
    {
        title: '客户类型名称',
        dataIndex: 'clientTypeName',
        align: 'center',
    },
    {

        title: '操作',
        // dataIndex: 'address',//找数据的键名
        render: (_, item) => {
            console.log(item);
            return <Space><Button type="primary">编辑</Button>
                <Button danger>删除</Button></Space>
        },
        align: 'center',
    },
];
const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
    const [form] = Form.useForm();
    return (
        <Modal
            visible={visible}
            title="添加客户"
            okText="提交"
            cancelText="返回"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        form.resetFields();
                        onCreate(values);
                        axios({
                            method: "post",
                            url: "http://localhost:3000/sys/clientManager/addClientType",
                            headers: {

                            }, data: {
                                "clientTypeId": values.clientTypeId,
                                "clientTypeName": values.clientTypeName,
                                "fatherTypeId": 0,
                                "priceSystemId": 0
                            }
                        }).then((res) => {
                            console.log(res);
                        });
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);

                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"

                initialValues={{
                    modifier: 'public',
                }}
            >
                <Form.Item
                    name="clientTypeId"
                    label="父类型"
                    rules={[
                        {
                            required: true,
                            message: '请输入',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="clientTypeName"
                    label="客户类型"
                    rules={[
                        {
                            required: true,
                            message: '请输入',
                        },
                    ]}>
                    <Input type="textarea" />
                </Form.Item>
                <Form.Item name="modifier" className="collection-create-form_last-form-item">
                </Form.Item>
            </Form>
        </Modal>
    );
};


const Test = () => {
    const [tablelist, setNoteList] = useState();
    const pageSize = 10;
    const currentPage = 1;

    useLayoutEffect(() => {
        Inquire();

    }, []);

    const Inquire = () => {
        axios({
            method: "get",
            url: "http://localhost:3000/sys/clientManager/queryClientTypeList",
            headers: {

            }, params: {
                pageSize: pageSize,
                currentPage: currentPage
            }
        }).then((res) => {
            console.log(res);
            setNoteList([...res.data.data]);
        });
    }



    const [visible, setVisible] = useState(false);

    const onCreate = (values) => {
        console.log('Received values of form: ', values);
        setVisible(false);

    };


    return (
        <>
            <div className='Lists'>
                <div> 客户类型管理</div>
                <Button type="primary">刷新</Button>
            </div>
            <div className='List'>
                <div>客户列表</div>
                <div>
                    <Button
                        type="primary"
                        onClick={() => {
                            setVisible(true);
                        }}
                    >
                        添加
                    </Button>
                    <CollectionCreateForm
                        visible={visible}
                        onCreate={onCreate}
                        onCancel={() => {
                            setVisible(false);
                        }}
                    />
                    {/* <Button type="primary">显示条数</Button>
                    <Button type="primary">排序方式</Button> */}
                </div>
            </div>
            <Table
                className='Tables'
                columns={columns}
                dataSource={tablelist}
                bordered
            />


        </>
    )
};

export default Test;